<template>
  <a-card :bordered="false" class="card-area">

    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <!-- 搜索区域 -->
      <a-form layout="inline">
        <a-form-item label="名称" >
          <a-input autocomplete="off"  v-model="queryParam.name.value"></a-input>
        </a-form-item>
        <a-form-item label="机构" >
          <AkTreeSelect :url="sysDepartUrl.tree"  v-model="queryParam.tenantId.value"
                        :defaultFirst="true" :allowClean="false" @change="tenantIdChange"></AkTreeSelect>
        </a-form-item>
        <a-form-item>
              <span  class="table-page-search-submitButtons">
                 <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
                  <a-button type="primary" @click="searchReset" icon="reload" >重置</a-button>
                  <a-button type="primary" @click="handleAdd">新增</a-button>
                <a-button  type="danger" icon="delete"  v-if="selectedRowKeys.length > 0"  @click="batchDel">批量删除</a-button>
              </span>
        </a-form-item>
      </a-form>
    </div>


    <!-- table区域-begin -->
    <div>
      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
        <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择&nbsp;<a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项&nbsp;&nbsp;
        <a style="margin-left: 24px" @click="onClearSelected">清空</a>
      </div>
      <a-table
        ref="table"
        size="middle"
        bordered
        :rowKey="(r)=>r.id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
        @change="handleTableChange">
        <span slot="ellipsis" slot-scope="text">
          <ak-ellipsis :value="text"/>
        </span>
        <span slot="image" slot-scope="text, r">
           <img v-if="!!text"  :large="text"
                style="height: 50px"
                :src="text"
                :preview="text"/>
        </span>
        <span slot="action" slot-scope="text, record"  class="table-operator">
          <a @click="handleDelete(record.id)">删除</a>
          <a @click="handleEdit(record)">编辑</a>
          <a @click="handleEditModel(record)">编辑模型</a>
          <a @click="handleDeployment(record)">部署</a>
          <a @click="handleVersion(record)">版本</a>
          <a @click="handleFormDesign(record)">设计表单</a>
          <a v-if="!!record.deploymentId" @click="handleStartProccess(record)">启动流程</a>
        </span>
      </a-table>
    </div>
    <a-modal title="部署流程" :visible="deploymentData.visible" :confirm-loading="deploymentData.confirmLoading"
             @ok="handleDeploymentOk"
             @cancel="handleDeploymentCancel">
      <a-form layout="inline">
        <a-form-item label="表单文件" >
          <ak-upload v-model="deploymentData.file" :file-length="10" type="temFile" :update-file-name="false"></ak-upload>
        </a-form-item>
      </a-form>
    </a-modal>
    <DefinitionList ref="definitionList" @close="modalFormOk"></DefinitionList>
    <FormDesignList ref="formDesignList" @close="modalFormOk"></FormDesignList>
    <model-modal ref="modalForm" @ok="modalFormOk"></model-modal>
    <FormModal ref="formModalRef"/>
  </a-card>
</template>

<script>
    import AkfhListMixin from '../../mixin/AkfhListMixin';
    import {activitModelUrl, sysDepartUrl, activitiFormUrl} from '../../api/url';
    import { concatUrl, filterObj } from '../../utils/util'
    import AkEllipsis from '../../components/akfh/AkEllipsis'
    import ModelModal from './modal/ModelModal'
    import { getAction, postAction } from '../../api/manage'
    import qs from 'qs';
    import { appApiBaseUrl } from '../../config/constant.config'
    import AkUpload from '../../components/akfh/AkUpload'
    import DefinitionList from './modal/DefinitionList'
    import FormDesignList from './FormDesignList'
    import AkTreeSelect from '../../components/akfh/AkTreeSelect'
    import FormModal from './modal/FormModal'

    export default {
      name: 'ModelList',
      components: { FormModal, AkTreeSelect, FormDesignList, DefinitionList, AkUpload, AkEllipsis , ModelModal},
      describe:'流程模型',
        mixins:[AkfhListMixin],
        data(){
          return {
            queryParam: {
              name: {
                column: 'name',
                type: 'like',
                value: ''
              },
              tenantId:{
                column:'tenantId',
                type:'eq',
                value:''
              }

            },
            columns:[
              {
                title: '#',
                dataIndex: '',
                key: 'rowIndex',
                width: 120,
                align: "center",
                customRender: function (t, r, index) {
                  return parseInt(index) + 1;
                }
              },
              {
                title: '名称',
                align: "center",
                dataIndex: 'name',
                scopedSlots: {customRender: 'ellipsis'},
              },

              {
                title: '默认版本',
                align: "center",
                dataIndex: 'version',
              },
              {
                title: '描述',
                align: "center",
                dataIndex: 'describeInfo',
                scopedSlots: {customRender: 'ellipsis'},
              },
              {
                title: '创建时间',
                align: "center",
                dataIndex: 'createDateTime',
                scopedSlots: {customRender: 'ellipsis'},
              },
              {
                title: '流程图',
                align: "center",
                dataIndex: 'imgUrl',
                scopedSlots: {customRender: 'image'},
              },
              {
                title: '操作',
                dataIndex: 'action',
                align: "center",
                scopedSlots: {customRender: 'action'},
              }
            ],
            deploymentData:{
              visible:false,
              confirmLoading:false,
              id:"",
              file:'',
            },
            url:activitModelUrl,
            sysDepartUrl:sysDepartUrl,

          }

        },
        methods:{
          handleStartProccess(record){
            this.loading = true;
            getAction(activitiFormUrl.getStartFormInfo,{deploymentId:record.deploymentId})
              .then(res=>{
                if(res.success){
                  let data = res.result;
                  if(data.formKey || (data.formProperties != null && data.formProperties.length > 0)){
                    this.$refs.formModalRef.showData(data)
                  }else {
                    postAction(activitiFormUrl.startProcess+"/"+record.deploymentId)
                      .then(r=>{
                        if(r.success){
                          this.$message.success(r.message);
                        }
                      })
                  }
                }
              })
              .finally(()=>{
                this.loading = false;
              })
          },
          tenantIdChange(){
            if(this.dataSource.length == 0){
              this.loadData();
            }
          },
          beforeLoadData(){
            return !!this.queryParam.tenantId.value;
          },
          handleFormDesign(record){

            this.$refs.formDesignList.title="设计表单";
            this.$refs.formDesignList.disableSubmit="true";
            this.$refs.formDesignList.edit(record);
          },
          handleVersion(record){
            this.$refs.definitionList.title="流程版本";
            this.$refs.definitionList.disableSubmit="true";
            this.$refs.definitionList.edit(record);
          },
          handleEditModel(record){
            this.$router.push({path:"/activiti/editModel", query:{modelId:record.id}});
          },
          getQueryParams() {
            //获取查询条件
            let sqp = {};
            for (let queryParamKey in this.queryParam) {
              sqp[this.queryParam[queryParamKey]['column']] = this.queryParam[queryParamKey]['value']
            }
            sqp.pageNo = this.ipagination.current;
            sqp.pageSize = this.ipagination.pageSize;
            return filterObj(sqp);
          },
          handleDeployment(record){
            this.deploymentData = {
              visible:true,
              confirmLoading:false,
              id:record.id,
              file:'',
            }
          },
          handleDeploymentOk(){
            this.deploymentData.confirmLoading = true;
            postAction(this.url.deployment, qs.stringify({id:this.deploymentData.id, file:this.deploymentData.file}))
              .then(res=>{
                if(res.success){
                  this.loadData();
                  this.$message.success(res.message);
                }
              }).finally(()=>{
              this.handleDeploymentCancel();
            })
          },
          handleDeploymentCancel(){
            this.deploymentData = {
              visible:false,
              confirmLoading:false,
              id:"",
              file:'',
            }
          },

          afterLoadData(res){
            res.result.content.forEach(k=>{
              k.imgUrl = concatUrl(appApiBaseUrl, activitModelUrl.img) + "?id="+k.id+"&_t="+new Date().getTime();
            })
          },
        }
    }
</script>

<style scoped>

</style>